<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>会员登录</title>
    <link href="./css/common.css" rel="stylesheet" type="text/css"/>
    <link href="./css/login.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<!--header部分-->
<div th:replace="header.html"></div>

<div class="container login">
    <div class="span12">
        <div class="ad">
            <img src="./image/login.jpg" width="500" height="330" alt="会员登录" title="会员登录">
        </div>		</div>
    <div class="span12 last">
        <div class="wrap">
            <div class="main">
                <div class="title">
                    <strong>会员登录</strong>USER LOGIN
                </div>
                <form id="loginForm"  method="post" novalidate="novalidate">
                    <table>
                        <tbody>
                        <tr>
                            <th> </th>
                            <td> <span id="msg"></span> </td>
                        </tr>
                        <tr>
                            <th>
                                用户名/E-mail:
                            </th>
                            <td>
                                <input type="text" id="username" name="username" class="text" maxlength="20">

                            </td>
                        </tr>
                        <tr>
                            <th>
                                密&nbsp;&nbsp;码:
                            </th>
                            <td>
                                <input type="password" id="password" name="password" class="text" maxlength="20" autocomplete="off">
                            </td>
                        </tr>
                        <tr>
                            <th>
                                验证码:
                            </th>
                            <td>
										<span class="fieldSet">
											<input type="text" id="captcha" name="captcha" class="text captcha" maxlength="4" autocomplete="off">
                                            <img id="captchaImage" class="captchaImage" src="/getCode" title="点击更换验证码">
										</span>
                            </td>
                        </tr>
                        <tr>
                            <th>&nbsp;

                            </th>
                            <td>
                                <label>
                                    <input type="checkbox" id="isRememberUsername" name="isRememberUsername" value="true">记住用户名
                                </label>
                                <label>
                                    &nbsp;&nbsp;<a >找回密码</a>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <th>&nbsp;

                            </th>
                            <td>
                                <input id="btnLogin" type="button" class="submit" value="登 录">
                            </td>
                        </tr>
                        <tr class="register">
                            <th>&nbsp;

                            </th>
                            <td>
                                <dl>
                                    <dt>还没有注册账号？</dt>
                                    <dd>
                                        立即注册即可体验在线购物！
                                        <a href="./会员注册.htm">立即注册</a>
                                    </dd>
                                </dl>
                            </td>
                        </tr>
                        </tbody></table>
                </form>
            </div>
        </div>
    </div>
</div>

<div th:replace="footer.html"></div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
    $(document).ready(function(){

        $("#captchaImage").click(function(){
            $("#captchaImage").attr("src","/getCode?time="+new Date().getMilliseconds());
        })

        // 1给"登录按钮"绑定单击事件处理程序
        $("#btnLogin").click(function(){
            // 2 得到form中的所有数据,转换成controller可以接受的格式
            var formData = $("#loginForm").serialize();

            // 3. 手动提交表单数据到 controller
            // Ajax 异步提交，界面局部刷新
            $.ajax({
                url:"/login",
                data:formData,
                dataType:"json",//返回值的数据类型,
                success : function(data){ // callback 回调函数  data接受controller返回的json
                    if(data=="100"){
                        // 登录成功,跳转到首页
                        location.href="/";

                    }else if(data=="998"){
                        $("#msg").html("验证码错误").css("color","red");
                    }else if(data=="999"){
                        $("#msg").html("登录失败").css("color","red");
                    }
                }
            })
        })
    })

</script>
</body></html>